<template>
  <div class="app-container">
    <!-- 列表展示 -->
    <el-table v-loading="loading" :data="activityList">
      <el-table-column label="活动名称" align="center" prop="name" />

      <el-table-column label="创建时间" align="center" prop="createTime" width="200">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>

      <el-table-column label="活动有效时间" align="center" width="200">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }} 至 {{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>

      <el-table-column label="参与活动人数" align="center" prop="userCount" width="100">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="queryLotUsers(scope.row)" v-hasPermi="['lottery:activity:edit']">{{scope.row.userCount}}人</el-button>
        </template>
      </el-table-column>

      <el-table-column label="累计现金奖励" align="center" prop="money" />

      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.lottery_activity_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>

    <!-- 查看参加活动用户详情 -->
    <el-dialog title="查看参加活动用户详情---所有用户" :visible.sync="open" width="800px" append-to-body>
      <div>当前活动发放奖品的总金额: {{this.totalMoney}}人民币</div>

      <el-table v-loading="loading" :data="activityUserList">

        <el-table-column label="姓名" align="center" prop="userName">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="queryLotUserOne(scope.row)" v-hasPermi="['lottery:activity:edit']">{{scope.row.userName}}</el-button>
          </template>
        </el-table-column>

        <el-table-column label="手机号" align="center" prop="phonenumber" />

        <el-table-column label="中奖商品的名字" align="center" prop="award.name" />

        <el-table-column label="中奖商品的金额" align="center" prop="award.money" />

        <el-table-column label="中奖时间" align="center" width="200">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.awardCreatTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">关闭参加活动用户详情</el-button>
      </div>
    </el-dialog>

    <!-- 查看参加活动用户详情---单个用户 -->
<!--    <el-dialog title="查看参加活动用户详情-&#45;&#45;单个用户" :visible.sync="openOne" width="550px" append-to-body>-->
<!--      <div>当前活动发放奖品的总金额: {{this.totalMoney}}人民币</div>-->

<!--      <el-table v-loading="loading" :data="activityUserList">-->

<!--        <el-table-column label="姓名" align="center" prop="userName">-->
<!--          <template slot-scope="scope">-->
<!--            <el-button size="mini" type="text" @click="queryLotUserOne(scope.row)" v-hasPermi="['lottery:activity:edit']">{{scope.row.userName}}</el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->

<!--        <el-table-column label="手机号" align="center" prop="phonenumber" />-->

<!--        <el-table-column label="中奖商品的名字" align="center" prop="award.name" />-->

<!--        <el-table-column label="中奖商品的金额" align="center" prop="award.money" />-->
<!--      </el-table>-->

<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button @click="cancel">关闭参加活动用户详情</el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->
  </div>
</template>

<script>
  import { listActivity, getAwardListByUserId} from "../../../api/lottery/activity";

  export default {
    name: "Activity",
    dicts: ['lottery_activity_status'],
    data() {
      return {
        // 遮罩层
        loading: true,
        // 总条数
        total: 0,
        // 抽奖活动表格数据
        activityList: [],
        // 抽奖活动用户集合
        activityUserList: [],
        // 抽奖活动的发送奖品总金额
        totalMoney: 0,
        // 是否显示弹出层
        open: false,
        openOne: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          name: null,
        },
        // 表单参数
        form: {},
      };
    },
    created() {
      this.getList();
    },
    methods: {
      /** 查询抽奖活动列表 */
      getList() {
        this.loading = true;
        listActivity(this.queryParams).then(response => {
          this.activityList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.openOne = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          name: null,
          status: null,
          createTime: null,
          startTime: null,
          endTime: null
        };
        this.resetForm("form");
      },
      /** 修改按钮操作 */
      queryLotUsers(row) {
        this.open = true;
        this.activityUserList = row.users;
        this.totalMoney       = row.money;
      },
      // queryLotUserOne(row) {
      //   this.openOne = true;
      //   console.log(row)
      // }
    }
  };
</script>
